﻿@{
    ViewBag.Title = "MemberSelect";
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
}

<script>

    //当前分组的GroupId
    var _currentGroupId = -1;

    //当前页
    var _currentPage = 1;

    $(document).ready(function () {

        loadMemberList();

        $("[keyenter]").keypress(function (e) {
            if (e.keyCode == 13) {
                loadMemberList();
            }
        });


    });

    //0、46、64、96、132数值可选，0代表640*640正方形头像
    function fitHeadImage(url, size) {

        if (url == undefined || url == null || url == "")
            return "";

        url = url.substr(0, url.length - 1);
        url = url + size;
        return url;
    }

    function loadMemberList(targetPage) {
        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        var args = new Object();
        args.Page = targetPage || 1;
        args.PageSize = 5;
        args.GroupId = _currentGroupId;
        args.CardNumber = $("#txtSearch_CardNumber").val();
        args.NickName = $("#txtSearch_NickName").val();

        $.ajax({
            url: "/Api/Member/GetMemberList",
            type: "POST",
            dataType: "json",
            data: JSON.stringify(args),
            success: function (data, status, jqXHR) {
                // alert(data);

                layer.close(loadLayerIndex);

                if (data.Success) {
                    var resultObj = data.Data;

                    _currentPage = resultObj.Page;

                    // alert(JSON.stringify(resultObj));
                    var gettpl = document.getElementById('memberListTableTemplate').innerHTML;
                    laytpl(gettpl).render(resultObj.ItemList, function (html) {
                        document.getElementById('divTableBodyContainer').innerHTML = html;
                        fitTable();
                    });

                    laypage({
                        skin: 'yahei',
                        cont: document.getElementById('divPagingContainer'),
                        pages: resultObj.TotalPage, //总页数
                        curr: resultObj.Page, //当前页
                        groups: 7, //连续显示分页数
                        jump: function (obj, first) {
                            if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                loadMemberList(obj.curr);
                            }
                        }
                    });

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function selectMember(id, nickname, headimgurl) {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

        var member = new Object();
        member.Id = id;
        member.NickName = nickname;
        member.Headimgurl = headimgurl;

        parent.__selectMemberResult(member, index);
    }

    function scrollHeader() {
        // alert(divTableBodyContainer.scrollLeft);
        var ml = 0 - divTableBodyContainer.scrollLeft;
        document.getElementById("tableHeader").style.cssText = "margin-left:" + ml + "px;";
    }

    function showtable() {
        var tablename = document.getElementById("tableBody");
        var li = tablename.getElementsByTagName("tr");
        for (var i = 0; i <= li.length; i++) {
            if (i % 2 == 0) {
                li[i].style.backgroundColor = "#efefef";
            } else li[i].style.backgroundColor = "#FFFFFF";
        }
    }

    function fitTable() {
        $("#tableBody").width($("#tableHeader").width());

        $("#tableHeader tr:first").each(function (n, value) {
            $(this).find("td").each(function (n, value) {
                $("#tableBody tr:first td:eq(" + n + ")").width(value.width)
            });
        });
    }

    function cancel() {
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    }

</script>

<script id="memberListTableTemplate" type="text/html">

    <table id="tableBody" border="0" cellspacing="0" cellpadding="0">

        {{# for(var i = 0, len = d.length; i < len; i++){ }}
        {{# var headimg = fitHeadImage(d[i].Headimgurl,46) }}
        <tr>
            <td><img src="{{headimg}}" /></td>
            <td><a href="javascript:void(0)" onclick="selectMember('{{ d[i].Id }}','{{ d[i].NickName }}','{{ d[i].Headimgurl }}')">{{ d[i].NickName }}</a></td>
            <td>{{ d[i].CardNumber }}</td>
            <td>
                {{# if(d[i].Name != null){ }}
                {{d[i].Name}}
                {{# } }}
            </td>
            <td>
                {{# if(d[i].Sex == 1){ }}
                男
                {{# }else if(d[i].Sex == 2){ }}
                女
                {{# }else if(d[i].Sex == 0){ }}
                未知
                {{# } }}
            </td>
            <td>
                {{# if(d[i].MobilePhone != null){ }}
                {{d[i].MobilePhone}}
                {{# } }}
            </td>
            <td>
                {{# if(d[i].Attention == true){ }}
                {{ d[i].SubscribeTime }}
                {{# }else{ }}
                已取消关注
                {{# } }}
            </td>
        </tr>
        {{# } }}

    </table>

</script>


<div style="margin-left:20px; margin-right:20px; margin-top:20px;">
    <span id="spanTitle" class="font_black_24">选择会员</span>
</div>

<div style=" background-color:#ccc; margin-left:20px; margin-right:20px; margin-top:10px; height:1px;">

</div>

<div style=" position:absolute; overflow:auto ;margin-top:25px;left:30px; right:30px; bottom:60px; top:50px; ">
    <div style="margin-top:16px;">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td bgcolor="#F6F6F6">
                    <div style="padding:10px;">
                        <table width="100%" border="0" cellspacing="0" cellpadding="8">
                            <tr>
                                <td width="60">卡号：</td>
                                <td width="160"> <input id="txtSearch_CardNumber" name="txtSearch_CardNumber" type="text" class="input_16" style="width:150px;" keyenter /></td>
                                <td width="60">昵称</td>
                                <td width="130"><input id="txtSearch_NickName" name="txtSearch_NickName" type="text" class="input_16" style="width:120px;" keyenter /></td>
                                <td>&nbsp;</td>
                                <td width="100" align="right">
                                    <span style=" margin-top:20px;">
                                        <input name="btnSearch" type="button" class="btn_blue" id="btnSearch" value="查询" onclick="loadMemberList()" />
                                    </span>
                                </td>
                            </tr>

                        </table>

                    </div>
                </td>
            </tr>
            <tr style="height:5px;background-image:url(Images/searchArea_bottom.jpg);background-repeat: repeat-x;">
                <td></td>
            </tr>
        </table>

    </div>

    <div style=" margin-top:20px">
        <div style="overflow:hidden; padding-left:20px;" class="tableHeader">

            <table id="tableHeader" border="0" cellspacing="0" cellpadding="0" width="1110" height="47">
                <tr>
                    <td width="80"></td>
                    <td width="220">微信昵称</td>
                    <td width="220">会员卡号</td>
                    <td width="140">姓名</td>
                    <td width="80">性别</td>
                    <td width="170">手机号码</td>
                    <td width="200">关注时间</td>
                </tr>
            </table>

        </div>



        <div style=" margin-top:10px">
            <!--div必须要设置height，否则滚动条出不来-->
            <div id="divTableBodyContainer" style="overflow:auto; height:100%;; padding-left:20px;" onscroll="scrollHeader()">
                <!--table必须要有一个确切的宽度，否则无法超出div-->

               
            </div>

        </div>

    </div>
    <div style="height:1px; margin-top:5px; background-color:#cccccc">

    </div>

    <div id="divPagingContainer" style=" margin-top:20px; margin-bottom:20px;text-align:right; ">

    </div>

</div>

<div style=" background-color:#ccc; position:absolute; bottom:55px; left:20px;right:20px; height:1px;">

</div>

<div style="position:absolute; bottom:15px; left:20px;right:20px;">


    <div style="float:left;">
        <!--<input name="btnSave" type="button" class="btn_red" id="btnSave" value="删 除" />-->
    </div>

    <div style="float:right">
        <!--<input name="btnSave" type="button" class="btn_blue" id="btnSave" value="保 存" />-->
        <input name="btnCancel" type="button" class="btn_blue" id="btnCancel" value="取 消" onclick="cancel()" />
    </div>
    <div style="clear:both">
    </div>
</div>

